<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>管理员登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta name="_token" content="{{ csrf_token() }}"/>
</head>
<style>
    body{
        background: #2d3a4b;
    }
    input:-webkit-autofill{
        -webkit-box-shadow:0 0 0 1000px white inset !important;
    }
    .main-login {
        width:100%;
        min-height:100%;

        overflow: hidden;
    }
    .login-form {
        position: relative;
        width: 520px;
        max-width: 100%;
        padding: 160px 35px 0;
        margin: 0 auto;
        overflow: hidden;
        box-sizing: border-box;
    }
    .form-tit {
        font-size: 26px;
        color: #eee;
        margin: 0 auto 40px auto;
        text-align: center;
        font-weight: 700;
    }
    .form-item {
        border: 1px solid hsla(0,0%,100%,.1);
        background: rgba(0,0,0,.1);
        border-radius: 5px;
        color: #454545;
        margin-bottom: 22px;
    }
    .form-item-cont{
        line-height: 36px;
        position: relative;
        font-size: 14px;
        display: inline-block;
        height: 47px;
        width: 85%;
    }
    .input-inner {
        background: transparent;
        border: 0;
        -webkit-appearance: none;
        border-radius: 0;
        padding: 12px 5px 12px 15px;
        color: #fff;
        height: 47px;
        caret-color: #fff;
        line-height: 36px;
        box-sizing: border-box;
        width:100%;
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        outline: none;
        font-size:14px
    }
    .login-form-input{

    }
    .input-ico{
        padding: 6px 5px 6px 15px;
        color: #889aa4;
        vertical-align: middle;
        width: 30px;
        display: inline-block;
        box-sizing: border-box;
    }
    .ico-img {
        width: 24px;
        height: 24px;
        vertical-align: -.15em;
        fill: currentColor;
        overflow: hidden;
    }
    .button-medium{
        color: #fff;
        background-color: #1890ff;
        border:none
    }
    .login-but{
        width:100%;
        margin-bottom: 30px;
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 4px;
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        -webkit-appearance: none;
        text-align: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        outline: none;
        -webkit-transition: .1s;
        transition: .1s;
        font-weight: 400;

    }
    .login-error{
        color:red;
        font-size: 12px;
        text-align: center;
        line-height: 28px;
    }
</style>
<body>
    <div class="main-login">
       <form id="theForm" class="login-form" onsubmit="return false;">
            <div class="form-tit">
                系统登录
            </div>
           <div class="form-item">
               <span class="input-ico">
                   <img src="/images/user.png" class="ico-img">
               </span>
               <div class="form-item-cont">
                       <input name="username" class="input-inner" autocomplete="off">
               </div>
           </div>

           <div class="form-item" style="margin-bottom:0">
               <span class="input-ico">
                   <img src="/images/password.png" class="ico-img" style="width:20px;height:20px">
               </span>
               <div class="form-item-cont">
                   <input type="password" name="password" class="input-inner">
               </div>

           </div>
           <div class="login-error" style="height:28px"></div>

           <div class="button">
               <button class="login-but button-medium">登录</button>
           </div>
           <div style="text-align: center;color:#ffffff"> </div>
       </form>

    </div>
</body>
<script src="{{ URL::asset('assets/jquery/jquery.min.js')}}"></script>
<script>
    $(function () {
        var hashUrl  = window.location.hash;
        if(hashUrl != '') {
            var return_url = hashUrl.substring(1);
        } else {
            var return_url = getParam("return_url");
        }

        function getParam(paramName) {
            paramValue = "", isFound = !1;
            if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {
                arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&"), i = 0;
                while (i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++
            }
            return paramValue ;
        };
        function loginsubmit()
        {
            $(".login-error").html('');
            let username = $('#theForm input[name=username]').val();
            let password = $('#theForm input[name=password]').val();

            if (username == "") {
                $(".login-error").html("请输入用户名！");
            }
            if (password == "") {
                $(".login-error").html("请输入密码！");
            }
            //登录请求
            let data = {username,password,return_url}

            $.ajax({
                url: "/login",
                type: "POST",
                dataType: "JSON",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                },
                data: data,
                success: function (data) {
                    if(data.success=='true'){
                        //验证通过，页面跳转
                        parent.window.location.href="/#"+return_url;

                    }else {
                        $(".login-error").html("账号或密码错误！");
                    }
                }
            })
        }

        $('.login-but').click(function () {
            loginsubmit();
        })
    })
</script>
</html>